<template>
  <div id="cardBox">
    <section v-if="cashCard">
      满减金额：<el-input v-model="submitForm.cardTitle" placeholder="请输入金额"></el-input> 元
      <span>(代金券名称显示为：xx元代金券)</span>
    </section>
    <section v-else-if="giftCard">
      礼品劵标题：<el-input v-model="submitForm.cardTitle" placeholder="请输入礼品券标题"></el-input>
      <span>(建议填写兑换券提供的服务或礼品名称，描述卡券提供的具体优惠)</span>
    </section>
    <section v-else-if="couponCard">
      优惠券标题：<el-input v-model="submitForm.cardTitle" placeholder="请输入优惠券标题"></el-input>
      <span>(建议填写优惠券提供的服务或商品名称，描述卡券提供的具体优惠)</span>
    </section>
    <section>
      领券限制：<el-input v-model="submitForm.cardNumLimit" placeholder="请输入内容"></el-input> 张
      <span>(每个用户领券上限，如不填，则默认为1)</span>
    </section>
    <section v-if="cashCard">
      <h4>使用条件：</h4>
      <el-radio-group v-model="condRadio" @change="handleChangeCondition">
        <div class="rad rad-min">
          <el-radio :label="1">最低消费</el-radio><div v-show="minimum" class="cond-min">满<el-input v-model="submitForm.useFull" placeholder="请输入金额"></el-input>元可用</div>
        </div>
        <div class="rad">
          <el-radio :label="2">使用范围(至少填写一项)</el-radio>
          <p v-show="!minimum">适 用 商 品 <el-input v-model="submitForm.fitProduct" placeholder="请输入内容"></el-input><i>填写本券适用的商品、类目或服务（15字内）</i></p>
          <p v-show="!minimum">不适用商品 <el-input v-model="submitForm.notFitProduct" placeholder="请输入内容"></el-input><i>填写本券不适用的商品、类目或服务（15字内）</i></p>
          <p>优 惠 共 享
            <el-select v-model="discountModel" placeholder="-请选择-" @change="changeUseTogether">
              <el-option
                v-for="item in discountOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <i class="col-red">使用条件的设置会在券上展示，请务必仔细确认。</i>
          </p>
        </div>
      </el-radio-group>
    </section>
    <section v-if="giftCard">
      <h4>消费条件：</h4>
      <el-radio-group v-model="condRadio" @change="handleChangeCondition">
        <div class="rad rad-min">
          <el-radio :label="1">金 额 满</el-radio><div v-show="minimum" class="cond-min"><el-input v-model="submitForm.useFull" placeholder="请输入金额"></el-input>元可用 <i>(消费金额大于0且只能到百分位)</i></div>
        </div>
        <div class="rad">
          <el-radio :label="2">指定商品</el-radio><div v-show="!minimum" class="cond-min"><el-input v-model="submitForm.fitProduct" placeholder="请输入内容"></el-input>可用</div>
          <p>优 惠 共 享
            <el-select v-model="submitForm.useTogether" placeholder="-请选择-" @change="changeUseTogether">
              <el-option
                v-for="item in discountOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <i class="col-red">使用条件的设置会在券上展示，请务必仔细确认。</i>
          </p>
        </div>
      </el-radio-group>
    </section>
    <section v-show="couponCard">
      使用条件：优惠共享
      <el-select v-model="discountModel" placeholder="-请选择-" @change="changeUseTogether">
        <el-option
          v-for="item in discountOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <i class="col-red">使用条件的设置会在券上展示，请务必仔细确认。</i>
    </section>
    <section>
      封面图片：
      <el-button @click="selecImgVisible = true">上传</el-button>
      <span>图片建议尺寸：850像素*350像素，大小不超过2M。</span>
      <img :src="submitForm.cardImgUrl" v-if="iconSelected" class="cover-img" alt="封面图片" />
    </section>
    <section>
      封面简介：<el-input v-model="submitForm.cardCoverDesc" :maxlength="parseInt(12)" class="cover-desc" placeholder="请输入内容"></el-input>
      <span>12字内</span>
    </section>
    <div class="control-group">
      <el-button :plain="true" @click="$router.push({name: 'WxCardManage'})">取消</el-button>
      <el-button type="primary" @click="handleSubmitForm">确定</el-button>
    </div>
    <!-- 选择图片弹窗 -->
    <el-dialog ref="dialog" title="选择图片" :visible.sync="selecImgVisible" class="dialog_cover" @open="SELECT_SOURCE({})">
        <dialog-image></dialog-image>
        <div slot="footer">
          <el-button type="primary" @click="handleSelectIcon()">确定</el-button>
          <el-button @click="selecImgVisible = false">取消</el-button>
        </div>
      </el-dialog>
  </div>
</template>
<script>
import { mapActions, mapState, mapMutations } from "vuex"
import dialogImage from '@/components/common/content/dialogImage'
export default {
  components: {dialogImage},
  data () {
    return {
      submitForm: {
        cardTitle: '',
        cardType: 0,
        cardNumLimit: '',
        cardImgUrl: '',
        cardCoverDesc: '',
        useFull: '',
        fitProduct: '',
        notFitProduct: '',
        useTogether: ''
      },
      condRadio: 1,
      minimum: true,
      discountModel: '',
      discountOptions: [{
        value: 0,
        label: '不与其他优惠共享'
      },{
        value: 1,
        label: '与其他优惠共享'
      }],
      selecImgVisible: false,
      iconSelected: false,
      titlemsg: '',
      cashCard: true,
      giftCard: false,
      couponCard: false
    }
  },
  computed: {
    ...mapState({
      selected: state => state.sourceManage.selected
    })
  },
  mounted() {
    this.getContentTypes()
    this.judgeCardType (this.$route.name)
  },
  methods: {
    ...mapActions(['getContentTypes', 'createCouponItem']),    
    ...mapMutations(['SELECT_SOURCE']),
    handleChangeCondition (val) {
      if(val === 1) {
        this.minimum = true
        this.submitForm.fitProduct = ''
        this.submitForm.notFitProduct = ''
      }else {
        this.minimum = false
        this.submitForm.useFull = ''
      }
    },
    handleSelectIcon(){
      this.submitForm.cardImgUrl = this.selected.url
      this.iconSelected = true
      this.selecImgVisible = false
    },
    judgeCardType (name) {
      if(name === 'NewWxCashCard'){
        this.cashCard = true
        this.giftCard = false
        this.couponCard = false
        this.submitForm.cardType = 0
        this.titlemsg = '请输入满减金额！'
      }else if(name === 'NewWxGiftCard'){
        this.cashCard = false
        this.giftCard = true
        this.couponCard = false
        this.submitForm.cardType = 1
        this.titlemsg = '请输入礼品券标题！'
      }else if(name === 'NewWxCouponCard'){
        this.giftCard = false
        this.cashCard = false
        this.couponCard = true
        this.submitForm.cardType = 2
        this.titlemsg = '请输入优惠券标题！'
      }
    },
    changeUseTogether (val) {
      this.submitForm.useTogether = val
    },
    msgTips (msg) {
      this.$message({
        type: 'info',
        message: msg
      })
    },
    handleSubmitForm () {
      //console.log(this.submitForm)
      if(!this.submitForm.cardTitle){
        this.msgTips(this.titlemsg)
        return
      }else if(isNaN(this.submitForm.cardTitle) && this.cashCard){
        this.msgTips('满减金额只能填数字！')
        return
      }else if(!this.submitForm.cardNumLimit){
        this.msgTips('请输入领券限制！')
        return
      }else if(this.submitForm.useTogether === ''){
        this.msgTips('请选择优惠共享！')
        return
      }else if(!this.submitForm.cardImgUrl){
        this.msgTips('请上传封面图片！')
        return
      }else if(!this.submitForm.cardCoverDesc){
        this.msgTips('请输入封面简介！')
        return
      }
      if(!this.couponCard){
        if(this.minimum){
          if(!this.submitForm.useFull){
            this.msgTips('请输入消费金额！')
            return
          }
        }else{
          if(!this.submitForm.fitProduct && !this.submitForm.notFitProduct){
            this.msgTips('请填写适用商品或指定商品！')
            return
          }
        }
      }
      
      this.createCouponItem( this.submitForm ).then((res) => {
        if(res.data.code === 1) {
          this.$message({
            type: 'success',
            message: '创建成功！'
          })
          setTimeout(() => {
            this.$router.push({name: 'WxCardManage'})
          }, 3000);
        }else {
          this.$message({
            type: 'info',
            message: res.data.msgZ
          })
        }
      })
    }
  }
}
</script>
<style lang="scss">
  #cardBox{
    .col-red{
      color: #ff0000 !important;
    }
    section{
      margin-bottom: 10px;
      .el-input{
        display: inline-block;
        width: 150px;
        margin-right: 6px;
        input{
          height: 30px;
        }
      }
      span{
        padding-left: 10px;
        font-style: italic;
        color: #999;
      }
      button{
        span{
          padding: 0;
          font-style: normal;
          color: inherit;
        }
      }
      .cover-desc{
        width: 220px;
      }
      .cover-img{
        height: 150px;
        display: block;
        margin: 10px;
      }
      .el-radio-group{
        font-size: 14px;
        .el-radio{
          margin-bottom: 10px;
        }
        span{
          font-style: normal;
          color: #333;
        }
      }
      .rad{
        .el-input{
          margin-left: 6px;
          width: 180px;
        }
        i{
          font-size: 12px;
          font-style: italic;
          color: #999;
        }
      }
      .rad-min{
        height: 35px;
        line-height: 35px;
      }
      .cond-min{
        display: inline;
        margin-left: 10px;
      }
      p{
        margin-bottom: 10px;
      }
    }
    .control-group{
      margin-top: 15px;
    }
  }
</style>
